<%@page import="java.util.ArrayList"%>
<%@page import="com.winexpress.sr.SalesReport"%>
<%@page import="java.util.List"%>
<%@page import="com.winexpress.util.SessionAttributes"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/WineXpressClient/resources/css/morris.css" rel="stylesheet" type="text/css" />
        <title>wineXpress online shop</title>        
    </head>
    <body>
        <t:adminNavigation/>
        <br/><br/>
    <center>
        <h2>Overall Profit Report</h2>
        <table class="table table-bordered" style=' width:70%;   ' >
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Profit</th>                    
                </tr>
            </thead>
            <tbody>         
                <%  SalesReport[] list = (SalesReport[]) request.getAttribute("salesList");%>
                <% for (int i = 0; i < list.length; i++) {%>
                <tr>
                    <td> <%=list[i].getYr()%> </td>
                    <td><%=list[i].getProfit()%></td>      
                </tr>   
                <%}%>
            </tbody>
        </table>
    </center>
    <div class="col-sm-11" style="float: right;">            
        <div class="row">
            <div class="col-md-5">
                <!-- BAR CHART -->
                <div class="box box-success">
                    <div class="box-header">
                        <h3 class="box-title"> Bar Chart</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="bar-chart" style="height: 300px;"></div>
                    </div><!-- /.box-body -->
                </div>                    
            </div>
            <div class="col-md-5">
                <!-- LINE CHART -->
                <div class="box box-info">
                    <div class="box-header">
                        <h3 class="box-title">Line Chart</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="line-chart" style="height: 300px;"></div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->

            </div>
        </div>
    </div>
    <!-- Morris.js charts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="/WineXpressClient/resources/js/morris.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            "use strict";
//            BAR CHART
            var bar = new Morris.Bar({
                element: 'bar-chart',
                resize: true,
                data: [
                    {year:${y2}, sales:${y2p}},
                    {year:${y1}, sales:${y1p}},
                    {year:${y0}, sales:${y0p}}
                ],
                barColors: ['#f56954'],
                xkey: 'year',
                ykeys: ['sales'],
                labels: ['Profit'],
                hideHover: 'auto'
            });

            // LINE CHART
            var line = new Morris.Line({
                element: 'line-chart',
                resize: true,
                data: [
                    {year:${y2}, sales:${y2p}},
                    {year:${y1}, sales:${y1p}},
                    {year:${y0}, sales:${y0p}}
                ],
                xkey: 'year',
                ykeys: ['sales'],
                labels: ['Profit'],
                lineColors: ['#3c8dbc'],
                hideHover: 'auto',
                parseTime: false
            });
        });
    </script>
    <t:footer/>
</body>
</html>
